<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="moon"></div>
    <div class="mountain"></div>
    <div class="mountain two"></div>
    <div class="land"></div>
    <div class="house">
        <div class="roof1"></div>
        <div class="wall2">
            <div class="window2"></div>
            <div class="attic"></div>
        </div>
        <div class="wall1">
            <div class="window"></div>
        </div>
        <div class="roof2"></div>
    </div>
</body>
<style>
    html {
        width: 100%;
        height: 100%;
    }
    
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background: linear-gradient(#021317, #293841, #80afa3, #ded8c9);
        position: relative;
        overflow: hidden;
    }
    
    .moon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        box-shadow: inset 10px -10px rgba(255, 255, 255, .9);
        top: 10%;
        left: 20%;
    }
    
    .mountain {
        position: absolute;
        width: 0;
        height: 0;
        border-right: 250px solid transparent;
        border-left: 250px solid transparent;
        border-bottom: 150px solid #1f2b33;
        bottom: 40px;
        left: -10%;
        z-index: 1;
    }
    
    .mountain.two {
        border-bottom: 150px solid #1b2328;
        bottom: 40px;
        left: 10%;
    }
    
    .land {
        width: 200%;
        height: 200px;
        position: absolute;
        border-radius: 50%;
        background: #192128;
        left: -50%;
        z-index: 2;
        bottom: -100px;
    }
    
    .house {
        width: 200px;
        height: 89px;
        position: absolute;
        right: -9px;
        bottom: 32px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(0.5);
    }
    
    .roof1 {
        position: absolute;
        width: 140px;
        height: 60px;
        background: #100a0e;
        transform: skew(-40deg, -8deg);
        top: -60px;
        right: 60px;
    }
    
    .wall1 {
        background: #232e38;
        height: 100%;
        flex: 3;
        transform: skew(0, -8deg);
    }
    
    .wall2 {
        flex: 2;
        background: #2f3c44;
        height: 100%;
        transform: skew(0, 10deg);
    }
    
    .attic {
        width: 0;
        height: 0;
        position: absolute;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 55px solid #2f3c44;
        top: -54px;
    }
    
    .wall1 .window {
        width: 26px;
        height: 26px;
        background: #f5edae;
        position: absolute;
        left: 54%;
        margin-top: 31px;
        box-shadow: 0 0 10px #f5edae;
    }
    
    .wall1 .window::before {
        content: '';
        width: 100%;
        height: 2px;
        background: rgb(0, 0, 0, 0.6);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    .wall1 .window::after {
        content: '';
        height: 100%;
        width: 2px;
        background: rgb(0, 0, 0, 0.6);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .roof2 {
        width: 140px;
        height: 70px;
        position: absolute;
        background: #100a0e;
        border-right: 0;
        box-shadow: -4px 4px 10px rgba(0, 0, 0, 0.4);
        transform: skew(40deg, -8deg);
        top: -60px;
        right: 6px;
    }
    
    .snow-box {
        width: 200%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        animation: snow_moving 12s linear forwards infinite;
        transform: translateY(-100%);
    }
    
    .snow-box:nth-of-type(2n) {
        animation-delay: 6s;
    }
    
    @keyframes snow_moving {
        0% {
            transform: translateY(-100%);
        }
        100% {
            transform: translateY(100%);
        }
    }
    
    .snowflake {
        width: 6px;
        height: 6px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: 0;
        animation: flake_moving 5s linear forwards infinite;
    }
    
    .snowflake:nth-of-type(2n) {
        animation-delay: 2.5s;
    }
    
    @keyframes flake_moving {
        0% {
            transform: translateX(0%);
        }
        50% {
            transform: translateX(-500%);
        }
        100% {
            transform: translateX(0%);
        }
    }
    
    .smaller .snowflake {
        width: 4px;
        height: 4px;
    }
    
    .smaller .snowflake {
        width: 2px;
        height: 2px;
    }
</style>

</html>